<template>
	<div>
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 10px;">
			<uni-grid :column="3" :show-border="false" :square="false" @change="change">
				<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
					<view class="grid-item-box">
						<uni-icons type="wallet" size="25" color="#bf5f09"></uni-icons>
						<text class="text">{{item.text}}</text>
						<text class="text">{{item.money}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 10px;">
			<view style="display: flex;align-items: center;justify-content: space-between;background-color: #42b983;color: #ffffff;border-radius: 6px;">
				<view style="width: 130px;height: 100px;display: flex;justify-content: center;align-items: center;">
					电子钱包
				</view>
				<text style="width: 100px;">
					可用余额：
				</text>
				<text style="width: 65px;">
					0.00
				</text>
			</view>
		</view>
		<view style="background-color: #ffffff;margin: 10px;border-radius: 12px;padding: 10px;">
			<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 15px;">
				<view style="width: 130px;height: 50px;border-radius: 6px;display: flex;justify-content: center;align-items: center;">
					借款
				</view>
				<text style="width: 100px;">
					可用额度：
				</text>
				<text style="width: 65px;">
					0.00
				</text>
			</view>
			<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 15px;">
				<view style="width: 130px;height: 50px;border-radius: 6px;display: flex;justify-content: center;align-items: center;">
					消费授信
				</view>
				<text style="width: 100px;">
					可用额度：
				</text>
				<text style="width: 65px;">
					0.00
				</text>
			</view>
			<!-- <view style="display: flex;align-items: center;justify-content: space-between;margin-top: 15px;">
				<view style="width: 130px;height: 50px;border-radius: 6px;display: flex;justify-content: center;align-items: center;">
					银行卡
				</view>
				<text style="width: 65px;">
					13张
				</text>
			</view> -->
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						text: '资产总额',
						money:'0'
					},
					{
						text: '负债总额',
						money:'0'
					},
					{
						text: '代收金额',
						money:'0'
					},
					{
						text: '待还金额',
						money:'0'
					},
					// {
					// 	text: '总结金额',
					// 	money:'0'
					// },
					{
						text: '保证金金额',
						money:'0'
					},
				]
			}
		},
		methods: {
			change(e) {
				let {index} = e.detail
				uni.navigateTo({
					url:this.list[index].link
				})
			},
		},
	}
</script>

<style scoped>
.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>